<template>
  <div >
    <el-row :gutter="36" >
      <el-col :span="6" >
        <div class="bgWhite" style="padding: 36px;padding-bottom: 14px">
          <div class="smallTitle">市场主体总数</div>
          <div class="bigNum">
            {{companyTotal}}
            <span style="font-size: 20px;line-height: 0;">户</span>
          </div>
          <div class="smallTitle">周同比<span class="ml15">12%</span></div>
          <div class="smallTitle">日同比<span class="ml15">11%</span></div>
          <hr style="margin: 17px 0">
          <div class="smallTitle">今日新增    <span class="ml15">1211户</span></div>
        </div>
      </el-col>

      <el-col :span="6" >
        <div class="bgWhite" style="padding: 36px;padding-bottom: 14px">
          <div class="smallTitle">预留数据</div>
          <div class="bigNum">
            8,846
          </div>
          <div class="imgDiv">
            <img :src="require('../assets/wave.png')">
          </div>
          <hr style="margin: 17px 0">
          <div class="smallTitle">预留数据</div>
        </div>
      </el-col>

      <el-col :span="6" >
        <div class="bgWhite" style="padding: 36px;padding-bottom: 14px">
          <div class="smallTitle">预留数据</div>
          <div class="bigNum">
            8,846
          </div>
          <div class="imgDiv">
            <img :src="require('../assets/bar.png')">
          </div>
          <hr style="margin: 17px 0">
          <div class="smallTitle">预留数据</div>
        </div>
      </el-col>

      <el-col :span="6" >
        <div class="bgWhite" style="padding: 36px;padding-bottom: 14px">
          <div class="smallTitle">预留数据</div>
          <div class="bigNum">
            8,846
          </div>
          <div class="imgDiv">
            <img :src="require('../assets/strip.png')">
          </div>
          <hr style="margin: 17px 0">
          <div class="smallTitle">预留数据</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="36" >
      <el-col :span="24">
        <div class="bgWhite" style="margin-top: 36px">
          <div class="subTitle">市场主体数量(户)
            <el-date-picker class="btnText"
                v-model="dates"
                type="monthrange"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份">
            </el-date-picker>
            <span class="btnText">本月</span><span class="btnText" style="color: #50C318">本年</span>
          </div>
          <el-row>
            <el-col :span="24">
              <div style="width:100%;height:100%;min-height:400px" id="chart1">
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="36" >
      <el-col :span="24">
        <div class="bgWhite" style="margin-top: 36px">
          <div class="subTitle">宜昌市场主体分类统计
            <el-button-group class="btnText">
              <el-button type="success" plain :class="{ active: curStatIndex==1}" @click="getChartTwoData(1)">市场主体类型</el-button>
              <el-button type="success" plain :class="{ active: curStatIndex==2}" @click="getChartTwoData(2)">经营类型</el-button>
              <el-button type="success" plain :class="{ active: curStatIndex==3}" @click="getChartTwoData(3)">市场主体属性</el-button>
              <el-button type="success" plain :class="{ active: curStatIndex==4}" @click="getChartTwoData(4)">责任制</el-button>
              <el-button type="success" plain :class="{ active: curStatIndex==5}" @click="getChartTwoData(5)">注册资本</el-button>
            </el-button-group>
          </div>
          <el-row>
            <el-col :span="18">
              <div style="width:100%;height:600px" id="chart2">
              </div>
            </el-col>
            <el-col :span="6">
              <div class="smallTitle">市场主体数量排行榜</div>
              <table class="mt7" style="width: 100%;font-size: 18px">
                <tr v-for="(item,index) in curList" :key="index">
                  <td style="width: 35px"> <span class="dot" :class="index<=2?'dark':'light'">{{index+1}}</span></td>
                  <td>{{item.name}}</td>
                  <td>{{item.value}}</td>
                </tr>
              </table>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import  'echarts/theme/macarons.js'

  function getChartOneOption(legend,xAxisLabel,series1,series2) {
    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
     /* toolbox: {
        feature: {
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },*/
      legend: {
        textStyle:{fontSize: 18},
        data: legend
      },
      color:['#3AA0FF','#52C41A'],
      xAxis: [
        {
          type: 'category',
          data: xAxisLabel,
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            fontSize : 18
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '市场主体数量(户)',
          nameTextStyle:{  fontSize : 18},
          min: 0,
    /*      max: 250,
          interval: 50,*/
          axisLabel: {
            formatter: '{value} 户',
            fontSize : 18
          }

        },
        {
          type: 'value',
          nameTextStyle:{fontSize: 18},
          name: '增长率',
          /*           min: 0,
                 max: 25,
                   interval: 5,*/
          axisLabel: {
            formatter: '{value} %',
            fontSize : 18
          }
        }
      ],
      series: [
        {
          name: legend[0],
          type: 'bar',
          barWidth: '40%',
          data: series1
        },
        {
          name: legend[1],
          type: 'line',
          yAxisIndex: 1,
          data:series2
        }
      ]
    }
  }

  function getChartTwoOption(legend,datas){
    return {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        textStyle:{fontSize: 18},
        right: 100,
        top:"middle",
        data: legend
      },
      series: [
        {
          name: '市场主体数量',
          type: 'pie',
          left:"-35%",
          radius: ['60%', '80%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '30',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: datas
        }
      ]
    };
  }
  export default {
    name: "certificateChart",
    data: function() {
      return {
        companyTotal:"26,560",
        curStatIndex:0,
        dates: [ "2017-01", "2017-12"],
        curList:[]
      }
    },
    methods: {
      getCompanyTotal: function () {
        let vm = this;
        this.$http.get("/yczmq/bigScreen/analysis/countCompany").then(resp=>{
          if (resp.status == 0) {
            vm.companyTotal = resp.data;
          }
        })
      },
      drawChart1(list){
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById("chart1"));
        let legend = ['市场主体数量', '增长率'];
        let xAxisLabel = list.map(n=>n.NATUREMONTH);
        let series1 =list.map(n=>n.MONTHCOUNT);
        let series2 =list.map(n=>n.RATE);
         myChart.setOption(getChartOneOption(legend,xAxisLabel,series1,series2));
      },
      drawChart2(data){
        console.log(data);
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById("chart2"),'macarons');
        let legend = data.text;
        let datas =this.curList = data.data;
        myChart.setOption(getChartTwoOption(legend,datas));
      },
      getChartOneData(){
        let data = {
          startDate:"2017-01-01",
          endDate:"2017-12-30"
        }
        this.$http.post("/yczmq/bigScreen/analysis/statisticsCompany",window.changeDataType(data)).then(resp=>{
          if (resp.status ==0 ) {
            this.drawChart1(resp.data);
          }
        })
      },
      getChartTwoData(StatIndex){
        this.curStatIndex = StatIndex;
        this.$http.get("/yczmq/bigScreen/analysis/statisticsCompanyType",{params:{StatIndex:StatIndex}}).then(resp=>{
          if (resp.status ==0 ) {
            this.drawChart2(resp.data);
          }
        })
      }
    },
    mounted(){
      this.getChartOneData();
      this.getChartTwoData(1);
    },
    created(){
      this.getCompanyTotal();
    }
  }
</script>

<style scoped>
  .imgDiv{
    width: 100%;
    height: 70px;
  }
  .imgDiv img{
    width: 100%;
    height: 100%;
  }
  .subTitle{
    padding-left: 38px;
    font-size:24px;
    font-weight:600;
    color:rgba(51,51,51,1);
    line-height:90px;
    height:90px;
    background:rgba(255,255,255,1);
    border-bottom: 1px solid lightgrey;
  }
  .btnText{
    float: right;
    margin-right: 36px;
    margin-top: 26px;
    font-size:20px;
    line-height:36px;
  }
  .active{
    color: #FFF;
    background-color: #67C23A;
    border-color: #67C23A;
  }
  .dot{
    display: inline-block;
    height: 22px;
    width: 22px;
    border-radius: 11px;
    text-align: center;
  }
  .dot.dark{
    background-color: #314659FF;
    color: white;
  }
  .dot.light{
    background-color: #F5F5F5FF;
    color: #565656FF;
  }
</style>